<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>HomeWork-05</title>
    <style>
        .nav{
            float: right;
            margin-right: 100px;
        }
        /* 使按钮与图标对其 */
        .nav ul{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .nav i{
            color: #03A9F4;
            font-size: 4em;
        }
        .nav ul li{
            list-style: none;
        }
        .head i{
            font-size: 6em;
        }
        .head2 i{
            font-size: 6em;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li class="head"><a href="#"><i class="material-icons">account_circle</i></a></li>
        <li class="head2" style="display: none;color: #03A9F4;"><a href="#"><i class="material-icons">remove_circle</i></a></li>
        <li class="hide"><a href="#"><i class="material-icons">create</i></a></li>
        <li class="hide"><a href="#"><i class="material-icons">palette</i></a></li>
        <li class="hide"><a href="#"><i class="material-icons" style="color: red;">delete_forever</i></a></li>
    </ul>
</div>
</body>
<script>
$(document).ready(function(){
  $("ul").hover(function(){
      $(".hide").fadeIn("slow");
      //隐藏head
      $(".head").hide();
      //显示head2
      $(".head2").fadeIn(500).css({"transition":"0.5s","transform":"rotate(180deg)"});
      //先让head旋转180
      $(".head").css("transform","rotate(180deg)");
  })
  $("ul").mouseleave(function(){
      $(".head2").hide();
      $(".head2").css("transform","rotate(0deg)");

      $(".hide").fadeOut("fast");
      $(".head").fadeIn(500).css({"transition":"0.5s","transform":"rotate(0deg)"});
  })
});
</script>
</html>